<template>
    <a-tabs :defaultActiveKey="defaultActiveKey" @change="changeTab">
        <a-tab-pane :tab="'SMB/CIFS' + $t('共享')" key="SMB" style="padding: 14px">
            <SMB ref="SMBRef" />
        </a-tab-pane>
        <a-tab-pane :tab="'NFS' + $t('共享')" key="NFS" style="padding: 14px">
            <NFS ref="NFSRef" />
        </a-tab-pane>
    </a-tabs>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'
import NoAuthPage from '@/components/common/NoAuthPage'
import SMB from './SMB.vue'
import NFS from '../../../../components/storage_mgr/filesharing/file_nfs'

export default {
    name: 'Share',
    components: { EmptyData, NoAuthPage, SMB, NFS },
    data() {
        return {
            defaultActiveKey: 'SMB',
            count: 0,
        }
    },
    created() {
        this.defaultActiveKey = localStorage.getItem('file_share') || 'SMB'
        const name = this.$route.query.name
        if (name) {
            this.defaultActiveKey = name
        }
    },
    methods: {
        changeTab(key) {
            const ref = `${key}Ref`
            this.defaultActiveKey = key;
            localStorage.setItem('file_share', key);
            if (this.count !== 0) this.$nextTick(() => this.$refs[ref].getList())
            this.count++
        }
    }
}
</script>


<style scoped>

::v-deep.ant-tabs-nav-container {
    background-color: #f0f3f5;
    /* padding-left: 10px; */
}

::v-deep.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
    border: none;
    background-color: transparent;
}

::v-deep.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
    background-color: #fff;
    border-bottom: 2px solid var(--themeColor);
}

/* 添加选中tab的下划线 */
::v-deep.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    content: '';
    width: 45px;
    height: 2px;
    transform: translateX(-50%);
    background-color: var(--themeColor);
}
</style>
